<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeTools :node-data="companyInfo" @add="addDepartment" />
        <hr>
        <!--
          :data 要渲染的数组
          default-expand-all为true时默认打开全部分支
         -->
        <el-tree
          :data="departs"
          default-expand-all
          :expand-on-click-node="false"
        >
          <!--
            //使用插槽增加样式
            //当使用element-ui的插槽时,会一个对象{data,node},data为当前遍历的值
            //由于插槽没有名字,使用vue插槽默认名字default
            -->
          <template #default="{data}">
            <!-- 接受删除事件,更新数据 -->
            <TreeTools :node-data="data" :is-tools="true" @edit="editDepartment" @add="addDepartment" @del="getDepartment" />
          </template>
        </el-tree>
      </el-card>
      <!-- 需要在这里添加.sync修饰符 -->
      <addDept ref="addDept" :node-data="nodeData" :is-showdialog.sync="isShowdialog" @add="getDepartment" />
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import addDept from './components/add-dept'
import { getDepartment } from '@/api/department'
import { ListtreeData } from '@/utils'
export default {
  components: { TreeTools, addDept },
  data() {
    return {
      departs: [],
      // 自己定义一个对象,用于使用插槽
      companyInfo: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      isShowdialog: false,
      // 组件传过来的对象
      nodeData: {}
    }
  },
  created() {
    this.getDepartment()
    // this.departs.forEach((item, index) => {
    //   const children = []
    //   this.departs.forEach((items, indexs) => {
    //     if (item.id === items.pid) {
    //       children.push(items)
    //       item.children = children
    //       delete this.departs[indexs]
    //     }
    //   })
    // })
    // console.log(61, this.departs)
  },
  methods: {
    // 封装更新数据
    async getDepartment() {
      const { depts } = await getDepartment()

      // 当pid为''时,这个时候为最顶级对象,将它作为id传给递归函数
      this.departs = ListtreeData(depts, '')
    },

    // 删除完更新数据
    delDepartment() {
      this.getDepartment()
    },
    addDepartment(nodeData) {
      this.isShowdialog = true
      console.log(nodeData)
      this.nodeData = nodeData
    },
    // 编辑
    async editDepartment(nodeData) {
      this.nodeData = nodeData
      // 利用ref触发add_dept组件内部的函数,传入id获取详情数据,渲染
      // 等待数据全部加载后,再显示弹窗,会等await函数接受再执行下面代码
      await this.$refs.addDept.getDepartmentByid(nodeData.id)
      // 弹窗显示
      this.isShowdialog = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
